<template>
	<view class="card-history-main">
		<view class="user_bg"
			:style="{ backgroundImage: `url(${userBg})`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }"
			@click.passive="previewImage">
			<view class="return-view" @click.stop="returnPrePage">
				<uni-icons type="left" size="28" color="#fff"></uni-icons>
			</view>
		</view>
		<view class="user-info">
			<view class="user-avatar-username">
				<view class="user-avatar" @click="toUserDetailPage">
					<image :src="userAvatar" mode="aspectFill"></image>
				</view>
				<view class="user-name">
					<view class="user-name-text">
						{{userName}}
					</view>
					<view class="take-city-num">
						已打卡{{cardCityNum}}个城市
					</view>
					<view class="records">
						获得{{records}}积分
					</view>
				</view>
			</view>
			<view class="guan-zhu">
				<button type="default" v-if="guanzhuText.length > 0">{{guanzhuText}}</button>
			</view>
		</view>
		<view class="records-num-zan">
			<view class="records-num-zan-item">
				<view class="total-records">
					{{records}}
				</view>
				<view class="total-records-text">
					总积分
				</view>
			</view>
			<view class="records-num-zan-item">
				<view class="total-records">
					{{takeCardNum}}
				</view>
				<view class="total-records-text">
					打卡次数
				</view>
			</view>
			<view class="records-num-zan-item">
				<view class="total-records">
					{{likeNum}}
				</view>
				<view class="total-records-text">
					获赞
				</view>
			</view>
		</view>

		<!-- 地图（去过哪些地方标记地点） -->
		<view class="map-content">
			<iframe style="width: 100%; height: 100%;" :src="mapUrl" frameborder="0"></iframe>
		</view>
		
		<!-- 打卡记录，打卡分享列表 -->
		<view class="take-card-list">
			<view class="card-item" v-for="(item,index) in cardList" :key="index">
				<view class="top-card">
					<view class="top-card-left">
						<view class="top-card-avatar" @click="toUserDetailPage">
							<image :src="item.userAvatar" mode="aspectFill"></image>
						</view>
						<view class="top-card-username-address-time">
							<view class="top-card-username">
								{{item.userName}}
							</view>
							<view class="address-time">
								{{item.cardTime}}&nbsp;{{item.cardAddress}}
							</view>
						</view>
					</view>
					<view class="top-card-right">
						<button type="default">
							+{{item.addRecord}}积分
						</button>
					</view>
				</view>
				<view class="card-conent">
					{{item.content}}
				</view>
				<view class="card-imgs">
					<view class="card-img-item" v-for="(img,index) in item.imgs" :key="index">
						<image :src="img" mode="aspectFill" @click="previewImgs(item.imgs,index)"></image>
					</view>
				</view>
				<view class="like-comment-share">
					<view class="like-icon-num">
						<view class="heart-icon">
							<uni-icons type="heart" size="16" v-if="!item.isLike"></uni-icons>
							<uni-icons type="heart-filled" size="16" color="#66596b" v-else></uni-icons>
						</view>
						<view class="like-num">
							{{item.likeNum}}
						</view>
					</view>
					<view class="comment-icon-num">
						<view class="heart-icon">
							<uni-icons type="chatbubble" size="16"></uni-icons>
						</view>
						<view class="like-num">
							{{item.commentNum}}
						</view>
					</view>
					<view class="share-view">
						<view class="share-icon">
							<image src="@/static/icons/card/share.png" mode="aspectFill"></image>
						</view>
						<view class="share-title">
							分享
						</view>
					</view>
				</view>
				<divider-line :width="100" :color="'#ebebeb'"></divider-line><strong></strong>
			</view>
		</view>
	</view>
</template>

<script>
	import DividerLine from '@/components/common-components/DividerLine.vue';
	import { getCardHistoryAllInfo } from '@/request/card.js';
	export default {
		components: {
			DividerLine
		},
		data() {
			return {
				userAid: null, // 上一个页面传过来的用户aid
				userBg: 'https://img0.baidu.com/it/u=2228786760,4114372717&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800', // 用户背景
				userAvatar: 'https://img1.baidu.com/it/u=1723273717,441296703&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
				userName: '程小雨',
				cardCityNum: 32,
				records: 2860,
				guanzhuText: '关注', // 关注，已关注，或者这个页面就是当前登录用户他自己的页面时为“”
				takeCardNum: 156, // 打卡次数
				likeNum: 1289, // 获得点赞数
				markers: [{
						longitude: 120.030423,
						latitude: 28.928350,
						name: '尚食美食广场'
					},
					{
						longitude: 120.027335,
						latitude: 28.28932513,
						name: '健之佳'
					},
					{
						longitude: 120.042757,
						latitude: 28.919838,
						name: '金同大厦'
					},
					{
						longitude: 120.063245,
						latitude: 28.894013,
						name: '五金城'
					}
				],
				mapUrl: 'https://uri.amap.com/marker',
				// mapUrl: 'https://uri.amap.com/marker?markers=116.480564,39.996374,望京SOHO|116.481590,39.989175,食尚坊美食广场&src=mypage&callnative=0',
				cardList: [
					{
						cardAid: 1,
						userAvatar: 'https://img1.baidu.com/it/u=1723273717,441296703&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '陈小雨',
						cardTime: '2024-12-02',
						cardAddress: '丽江古城',
						addRecord: '50',
						content: '洱海边的日落真的太美了！第一次看到这么震撼的景色，大理果然名不虚传。',
						imgs: [
							'https://img2.baidu.com/it/u=1592328870,3046655597&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1400',
							'https://img1.baidu.com/it/u=1457614044,2034795786&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=500',
							'https://img2.baidu.com/it/u=3267049458,3718045539&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422'
						],
						likeNum: 286,
						isLike: false,
						commentNum: 42,
					},
					{
						cardAid: 2,
						userAvatar: 'https://img1.baidu.com/it/u=1723273717,441296703&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '陈小雨',
						cardTime: '2024-10-01',
						cardAddress: '北京',
						addRecord: '50',
						content: '🚩怀着激动的心情，即将奔赴北京天安门。为的是亲眼目睹那激动人心的升旗仪式，看国旗与太阳一同升起，听国歌响彻广场，在国旗下感受那份凝聚的力量，让这一次的经历，成为人生中最具仪式感的爱国记忆。',
						imgs: [
							'https://img2.baidu.com/it/u=1778787457,3877892091&fm=253&fmt=auto&app=120&f=JPEG?w=626&h=430',
							'https://img1.baidu.com/it/u=853890413,2344505682&fm=253&fmt=auto&app=120&f=JPEG?w=886&h=500'
						],
						likeNum: 1234,
						isLike: false,
						commentNum: 24,
					},
					{
						cardAid: 3,
						userAvatar: 'https://img1.baidu.com/it/u=1723273717,441296703&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '陈小雨',
						cardTime: '2024-06-12',
						cardAddress: '挪威',
						addRecord: '50',
						content: '🌞夏日炎炎，我已逃离暑热，置身挪威啦！漫步在挪威的土地上，被凉爽的空气包裹，看冰川与蓝天相映，听鸟鸣虫叫，赏落日余晖洒在古老的木屋。这个夏天，挪威给了我一场清凉又浪漫的旅行，爱了爱了～',
						imgs: [
							'https://img0.baidu.com/it/u=2422380432,1380048575&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334'
						],
						likeNum: 9,
						isLike: false,
						commentNum: 0,
					}
				],
			};
		},
		onLoad(options) {
			console.log(options);
			this.userAid = options.userAid;
			// 获取用户的打卡记录全部信息
			this.getCardHistoryAllInfoFunc();
		},
		methods: {
			
			// 获取用户的打卡记录全部信息
			getCardHistoryAllInfoFunc(){
				uni.showLoading({
					title: '加载中...'
				})
				const param = {
					userAid: this.userAid
				}
				getCardHistoryAllInfo(param).then(res=>{
					console.log(res);
					if(res.data.code === 10000){
						const info = res.data.data;
						this.userBg = info.userBg;
						this.userAvatar = info.userAvatar;
						this.userName = info.userName;
						this.cardCityNum = info.cardCityNum;
						this.records = info.records;
						this.guanzhuText = info.guanzhuText;
						this.takeCardNum = info.takeCardNum;
						this.markers = info.markers;
						this.cardList = info.cardList;
					}else {
						uni.showToast({
							title: '打卡信息获取失败!',
							icon: 'none'
						})
					}
					// 获取地图标点经纬度
					this.getMapDataFunc();
				}).catch(err=>{
					console.error(err);
					uni.showToast({
						title: '打卡信息获取失败！',
						icon: 'none'
					})
				})
			},
			
			// 返回上一页
			returnPrePage() {
				console.log("点击了返回");
				uni.navigateBack()
			},

			// 获取地图标点经纬度
			getMapDataFunc() {
				this.mapUrl = 'https://uri.amap.com/marker?markers='
				if (this.markers.length > 0) {
					this.markers.forEach(item => {
						this.mapUrl += item.longitude + ',' + item.latitude + ',' + item.name + '|'
					})
				}
				this.mapUrl = this.mapUrl.slice(0,-1);
				console.log(this.mapUrl);
				uni.hideLoading()
			},

			// 点击背景预览图片
			previewImage() {
				uni.previewImage({
					urls: [this.userBg], // 将用户背景图片的 URL 放入数组中，以便预览
					current: this.userBg, // 设置当前显示的图片为用户背景图片
				});
			},
			
			// 点击分享的列表里面的图片预览
			previewImgs(imgs,index){
				uni.previewImage({
					urls: imgs, // 将用户背景图片的 URL 放入数组中，以便预览
					current: index, // 设置当前显示的图片为用户背景图片
				});
			},
			
			// 去用户主页
			toUserDetailPage(){
				uni.navigateTo({
					url: `/pages/tabBar/template/userDetailPage?aid=${this.userAid}`
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.card-history-main {

		.user_bg {
			position: relative;
			width: 100%;
			height: 170px;
			box-shadow: 0 10px 5px rgba(182, 182, 182, 0.5);

			.return-view {
				position: absolute;
				top: 30px;
				left: 15px;
			}
		}

		.user-info {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			margin-top: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.user-avatar-username {
				display: flex;
				align-items: center;

				.user-avatar {
					image {
						width: 70px;
						height: 70px;
						border-radius: 50%;
					}
				}

				.user-name {
					margin-left: 15px;

					// background-color: #4B5563;
					.user-name-text {
						color: #000;
						font-size: 15.75px;
						font-weight: 500;
						margin-bottom: 4px;
					}

					.take-city-num {
						font-size: 12.25px;
						color: #4B5563;
					}

					.records {
						color: #4B5563;
						font-size: 12.25px;
					}
				}
			}

			.guan-zhu {
				button {
					width: 70px;
					height: 35px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 60px;
					background-color: #66596b;
					color: #fff;
					font-size: 14px;
				}
			}
		}

		.records-num-zan {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			justify-content: space-around;
			margin-top: 20px;

			.records-num-zan-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF;
				box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
				border-radius: 12px;
				width: 100px;
				padding-top: 10px;
				padding-bottom: 10px;


				.total-records {
					font-size: 21px;
					color: #66596b;
				}

				.total-records-text {
					font-size: 12px;
					color: #6B7280;
				}
			}
		}

		.map-content {
			width: 90%;
			height: 500px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 20px;
			background-color: #fff;
			margin-bottom: 40px;
		}
		
		.take-card-list{
			margin-top: 10px;
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			
			.card-item{
				width: 100%;
				background-color: #f8f8f8;
				border-radius: 12px;
				// box-shadow: 0 0 10px 5px rgba(180, 180, 180, 0.6);
				// margin-bottom: 20px;
				// padding-bottom: 20px;
				// padding-top: 20px;
				
				.top-card{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 95%;
					margin-left: auto;
					margin-right: auto;
					margin-top: 30px;
					
					.top-card-left{
						display: flex;
						
						.top-card-avatar{
							image{
								width: 35px;
								height: 35px;
								border-radius: 50%;
							}
						}
						.top-card-username-address-time{
							margin-left: 5px;
							.top-card-username{
								font-size: 14px;
								color: #000000;
							}
							.address-time{
								font-size: 10px;
								color: #6B7280;
							}
						}
					}
					.top-card-right{
						button{
							color: #fff;
							background-color: #66596b;
							border-radius: 4px;
							// width: 50px;
							// height: 25px;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 10px;
						}
					}
				}
				
				.card-conent{
					margin-top: 10px;
					font-size: 14px;
					line-height: 21px;
					color: #374151;
					width: 95%;
					margin-left: auto;
					margin-right: auto;
				}
				.card-imgs{
					margin-top: 10px;
					display: flex;
					flex-wrap: wrap;
					width: 95%;
					margin-left: auto;
					margin-right: auto;
					// justify-content: space-between;
					
					.card-img-item{
						width: 30%;
						margin-right: 10px;
						image{
							width: 100%;
							height: 100px;
							border-radius: 5px;
						}
					}
				}
				.like-comment-share{
					margin-top: 10px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 95%;
					margin-left: auto;
					margin-right: auto;
					margin-bottom: 30px;
					
					.like-icon-num{
						display: flex;
						align-items: center;
						.like-num{
							font-size: 12px;
							color: #6B7280;
						}
					}
					.comment-icon-num{
						display: flex;
						align-items: center;
						.like-num{
							font-size: 12px;
							color: #6B7280;
						}
					}
					.share-view{
						display: flex;
						align-items: center;
						.share-icon{
							image{
								width: 12px;
								height: 12px;
							}
						}
						.share-title{
							margin-left: 2px;
							font-size: 12px;
							color: #6B7280;
						}
					}
				}
			}
		}
	}
</style>